<!DOCTYPE html>
<html>
<head>
  <title>window.Marty example</title>
</head>
<body>

<div id="app"></div>
<script type="text/javascript" src="../../node_modules/react/dist/react.js"></script>
<script type="text/javascript" src="../../dist/marty.js"></script>

<script type="text/javascript">
  var FooStore = Marty.createStore({
    getInitialState: function () {
      return {
        1: { displayName: 'Foo' },
        2: { displayName: 'Bar' }
      };
    },
    getFoo: function (id) {
      return this.state[id];
    }
  });

  var Application = Marty.createApplication(function () {
    this.register('fooStore', FooStore);
  });

  var Foo = React.createClass({
    render: function () {
      return React.createElement("div", null, this.props.foo.displayName);
    }
  });

  var FooContainer = Marty.createContainer(Foo, {
    listenTo: 'fooStore',
    fetch: {
      foo: function () {
        return this.app.fooStore.getFoo(this.props.id);
      }
    }
  })

  var element = React.createElement(FooContainer, {
    id: 1,
    app: new Application()
  });

  React.render(element, document.getElementById('app'));
</script>
</body>
</html>